/**
 * Created By ZaraNengap 2018/9/5
 * 组件例子
 */
import React from 'react';
import { connect } from 'react-redux'
import { Card, Form } from 'antd'
import 'styles/component-lib/component-example.scss'

class ComponentExample extends React.Component {

  constructor(props) {
    super(props);
    const { example } = props;
    let methodList = example.getMethod(this);
    Object.keys(methodList).map(methodName => {
      this[methodName] = methodList[methodName]
    });
    if(typeof example.state === 'function') {
      this.state = example.state(this);
    } else {
      this.state = example.state;
    }
  }

  componentDidMount() {
    const { example } = this.props;
    if(example.componentDidMount) {
      example.componentDidMount(this);
    }
  }

  getDescription = description => {
    let result = [];
    description.split('::').map((section, index) => {
      result.push(index % 2 === 0 ? section : <code className="font-code" key={index}>{section}</code>)
    });
    return result;
  };

  render() {
    const { example } = this.props;
    return (
      <Card style={{ width: '100%', marginBottom: 24 }} className="component-example">
        {example.getContent(this)}
        <div className="component-example-description">
          <p className="component-example-description-title">{example.title}</p>
          <p style={{ marginBottom: 0 }}>{this.getDescription(example.description)}</p>
        </div>
      </Card>
    );
  }
}

ComponentExample.PropTypes = {
  example: React.PropTypes.object.isRequired,
  componentKey: React.PropTypes.string.isRequired,
};

function mapStateToProps(state) {
  return {
    company: state.login.company,
    user: state.login.user,
    language: state.main.language,
    enableScan: state.main.enableScan
  }
}

const WrappedComponentExample = Form.create()(ComponentExample);

export default connect(mapStateToProps)(WrappedComponentExample);
